<template>
  <div class="file-info-item">
    <!-- 文件名和操作按钮 -->
    <div class="file-header">
      <i :class="getFileIcon(item)" class="file-icon"></i>
      <span class="file-name">{{ item.name }}</span>
      <el-tag size="mini" :type="item.isDirectory ? 'primary' : 'success'" class="file-type-tag">
        {{ item.isDirectory ? '文件夹' : '文件' }}
      </el-tag>
      <el-button 
        v-if="!item.isDirectory"
        size="mini" 
        type="primary"
        plain
        @click="$emit('download', item)">
        <i class="el-icon-download"></i> 下载
      </el-button>
    </div>
    
    <!-- 文件属性信息 -->
    <div class="file-properties">
      <div v-if="item.path" class="property-item">
        <i class="el-icon-folder property-icon"></i>
        <div>
          <div class="property-label">路径</div>
          <div class="property-value">{{ item.path }}</div>
        </div>
      </div>
      
      <div v-if="item.size" class="property-item">
        <i class="el-icon-document property-icon"></i>
        <div>
          <div class="property-label">大小</div>
          <div class="property-value">{{ formatFileSize(item.size) }}</div>
        </div>
      </div>
      
      <div v-if="item.lastModified" class="property-item">
        <i class="el-icon-time property-icon"></i>
        <div>
          <div class="property-label">修改时间</div>
          <div class="property-value">{{ item.lastModified }}</div>
        </div>
      </div>
      
      <div v-if="item.permissions" class="property-item">
        <i class="el-icon-lock property-icon"></i>
        <div>
          <div class="property-label">权限</div>
          <div class="property-value">
            <span class="file-permissions">{{ item.permissions }}</span>
          </div>
        </div>
      </div>
      
      <div v-if="item.owner" class="property-item">
        <i class="el-icon-user property-icon"></i>
        <div>
          <div class="property-label">所有者</div>
          <div class="property-value">{{ item.owner }}</div>
        </div>
      </div>
      
      <div v-if="item.group" class="property-item">
        <i class="el-icon-s-custom property-icon"></i>
        <div>
          <div class="property-label">用户组</div>
          <div class="property-value">{{ item.group }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "FileInfoItem",
  props: {
    item: {
      type: Object,
      required: true
    },
    serverIp: {
      type: String,
      required: true
    }
  },
  methods: {
    getFileIcon(item) {
      if (item.isDirectory) {
        return 'el-icon-folder';
      }
      const ext = item.name.split('.').pop().toLowerCase();
      const iconMap = {
        'txt': 'el-icon-document',
        'pdf': 'el-icon-document',
        'doc': 'el-icon-document',
        'docx': 'el-icon-document',
        'jpg': 'el-icon-picture',
        'jpeg': 'el-icon-picture',
        'png': 'el-icon-picture',
        'gif': 'el-icon-picture',
        'mp4': 'el-icon-video-camera',
        'avi': 'el-icon-video-camera',
        'mp3': 'el-icon-headset',
        'wav': 'el-icon-headset',
        'zip': 'el-icon-box',
        'rar': 'el-icon-box',
        'js': 'el-icon-document',
        'html': 'el-icon-document',
        'css': 'el-icon-document',
        'java': 'el-icon-document',
        'py': 'el-icon-document'
      };
      return iconMap[ext] || 'el-icon-document';
    },
    formatFileSize(size) {
      // 如果已经是格式化的字符串（包含单位），直接返回
      if (!size || size === '0' || size === '-') return size || '0 B';
      
      // 如果包含单位字母，说明已经格式化过了
      if (/[A-Za-z]/.test(size)) {
        return size;
      }
      
      // 如果是纯数字，按字节处理
      const bytes = parseInt(size);
      if (isNaN(bytes)) return size;
      
      const k = 1024;
      const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    }
  }
}
</script>

<style scoped lang="scss">
.file-info-item {
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #fafafa;
}

.file-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

.file-icon {
  font-size: 18px;
  color: #409eff;
  margin-right: 8px;
}

.file-name {
  font-weight: 600;
  margin-right: 12px;
  font-size: 15px;
  color: #303133;
}

.file-type-tag {
  margin-right: 10px;
}

.file-properties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  font-size: 13px;
}

.property-item {
  display: flex;
  align-items: flex-start;
  padding: 4px 0;
}

.property-icon {
  margin-right: 6px;
  color: #909399;
  margin-top: 2px;
  flex-shrink: 0;
}

.property-label {
  color: #909399;
  font-size: 11px;
  margin-bottom: 2px;
}

.property-value {
  color: #606266;
  word-break: break-all;
  line-height: 1.4;
}

.file-permissions {
  font-family: monospace;
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}
</style>